@extends('layouts.back_stage')
@section('style')
    @parent
    <style>
        .bound{margin-left:40px;width:700px;height:40px;padding-left:10px;font-size:18px;}
        .bound_p1{width:700px;height:40px;margin-left:40px;line-height:40px;margin-top:10px;font-size:25px;color:#1aad1a;}
        .bound_p2{width:700px;height:40px;margin-left:40px;line-height:40px;margin-top:10px;font-size:20px;}
        .bound_ul{width:700px;height:600px;overflow-y: auto;overflow-x: hidden;float:left;margin-left:40px;}
        .bound_li{width:1000%;height:40px;line-height:40px;font-size:20px;margin-left: 30px;}
    </style>
@endsection
@section('content')
    <div class="container">
        <div class="row">
            <div style="margin: 30px;">
                <h3 >绑定订单和一级二维码</h3>
            </div>
            <div class="supplier-choose" style="width:100%;line-height:30px;height:30px;margin-bottom:15px">
                <a class="btn bt_a btn-primary" style="float: right" href="/out-stage">返回列表</a>
            </div>
            <div class="form-group">
                <input class="bound" type="text" placeholder="请扫描二级二维码">
                <p class="bound_p1"></p>
            </div>
            <div class="form-group">
                <p class="bound_p2">已绑定订单的二级码</p>
            </div>
            <ul class="bound_ul">
                @if(count($qrCodes) > 0)
                    @foreach($qrCodes as $k=>$v)
                        {{ $v->qrcode }}
                        @endforeach
                    @endif
            </ul>
        </div>
    </div>
    <script>
        //自动获取焦点>
        setTimeout(function () {
            $(".bound").focus();
        },50);
        $(function(){
            $('.bound').blur(function () {
                var that = this;
                setTimeout(function () {
                    $(that).focus();
                },100);
            });
        });
        /*input实时监控*/
        $(".bound").on("input",function(){
            var codes = $('.bound').val();
            var id = '{{ $_GET['id'] }}';
            if ((codes != '' && codes.length=='32' && codes.substr(0,1)!="h") || codes.length=='66') {
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    type: 'post',
                    url: '/out-stage/store',
                    data: {'codes':codes,'id':id},
                    success: function (data) {
                        if(data.success){
                            $(".bound_p1").text("");
                            $(".bound_p1").text(data.msg);
                            $(".bound_ul").append("<li class='bound_li'>"+data.data+"</li>");
                            $('.bound').val('');
                        }else{
                            $(".faceImg").attr("src","/img/weep.png");
                            $(".oHandle").text(data.msg);
                            $(".oSuccess").show(0).delay(1000).hide(0);
                            $('.bound').val('');
                        }
                    }
                })
            }
        });
    </script>
@endsection